<section class="content-header">
  <h1>
    Announcements
    <small>{{ ctrl.announcements.length }} announcements</small>
  </h1>
  <ol class="breadcrumb">
    <li class="active"><i class="fa fa-rss"></i> Announcements</li>
  </ol>
</section>

<section class="content">
  <div class="alert alert-warning alert-dismissible" ng-show="!ctrl.validateStatus.validated && ctrl.validateStatus.auth">
    <h4><i class="icon fa fa-warning"></i> {{ 'ui.page.user.profile.required.title' | translate }}</h4>
    {{ 'ui.page.user.profile.required.content' | translate }}
    <a ui-sref="user_profile">{{ 'ui.page.user.profile.required.link' | translate }}</a>
  </div>
  <ul class="timeline">
    <li ng-repeat="announcement in ctrl.announcements">
      <i class="fa fa-comment bg-blue"></i>
      <div class="timeline-item">
        <span class="time"><i class="fa fa-clock-o"></i> {{ 'ui.page.announcement.col.publish' | translate }}: <span data-balloon="{{ announcement.createdAt | date: 'yyyy-MM-dd (EEE) HH:mm:ss Z' }}">{{ announcement.createdAt | amTimeAgo }}</span></span>
        <h3 class="timeline-header">{{ announcement.title }}</h3>
        <div class="timeline-body" ng-bind-html="announcement.content"></div>
      </div>
    </li>
    <li>
      <i class="fa fa-clock-o bg-gray"></i>
    </li>
  </ul>
</section>
